import React, { useState } from "react";
import styles from "./bear.module.less";
import { connect } from "react-redux";
import { notDoneDataAction } from "@redux/actions02";
import { useNavigate } from "react-router-dom";

const Bear = (props) => {
    const { notDoneDataAction, notDoneList } = props;
    const navigate = useNavigate();

    const [isSpread, setIsSpread] = useState(false);

    return (
        <>
            <div
                className={styles.mask}
                style={{ display: isSpread ? "block" : "none" }}
            ></div>
            <div
                className={`${styles.show_not_finish_wrap} ${
                    isSpread ? styles.open : ""
                }`}
            >
                <p className={styles.title}>未完成指示牌</p>
                <div className={styles.main}>
                    <ul className={styles.not_finish_ul}>
                        {notDoneList.map((item, index) => {
                            return (
                                <li
                                    key={item[0]}
                                    onClick={() => {
                                        const arr = item[0].split("-");
                                        navigate(
                                            `/todos?y=${arr[0]}&m=${arr[1]}&d=${arr[2]}`
                                        );
                                        setIsSpread(false);
                                    }}
                                >
                                    <p className={styles.sort}>{index + 1}</p>
                                    <span>
                                        {item[0]
                                            .replace("-", "年")
                                            .replace("-", "月")}
                                        日
                                    </span>
                                    <span>{item[1]}个</span>
                                </li>
                            );
                        })}
                    </ul>
                </div>
                <div
                    className={styles.bear_wrap}
                    title="点我展示未完成路牌哦~"
                    onClick={() => {
                        setIsSpread(!isSpread);
                        isSpread || notDoneDataAction();
                    }}
                ></div>
            </div>
        </>
    );
};

export default connect(
    (state) => ({
        notDoneList: state.notDoneDataReducer,
    }),
    { notDoneDataAction }
)(Bear);
